<template>
  <div style="display: flex;flex-direction: column">
    <!--搜索和切换部分-->
    <div style="display: flex;flex-direction: row">
      <div class="tabContainer">
        <span @click="changeUserType(true)" ref="tab1" class="tabChoice activeTab" style="float: left">用户  </span>
        <span @click="changeUserType(false)" ref="tab2" class="tabChoice" style="float: right">管理员</span>
      </div>
      <div style="margin: 20px 10px 20px auto;">
        <el-input
            class="input"
            :prefix-icon="icon"
            suffix-icon="el-icon-search"
            v-model="searchString"
            clearable
            @keydown.enter.native="search"
        />
        <el-dropdown @click="search(true)" size="large" split-button trigger="click" @command="handleClick">
          <span style="color: var(--btnText)">{{ btnWord }}</span>
          <el-dropdown-menu ref="dropdown" slot="dropdown" :append-to-body="false"
                            style="background-color: var(--lightBg)!important;border: none">
            <el-dropdown-item command="name">根据用户名搜索</el-dropdown-item>
            <el-dropdown-item command="phone">根据手机号搜索</el-dropdown-item>
            <el-dropdown-item command="identification_card">根据身份证搜索</el-dropdown-item>
            <el-dropdown-item command="city">根据城市名搜索</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div ref="here"></div>
    </div>
    <!--按钮组部分-->
    <div style="margin-top: 40px;margin-bottom: 30px;display: flex;flex-direction: row">
      <el-button-group style="margin-left: 25px">
        <el-tooltip content="添加用户" placement="top">
          <el-button @click="openDialog" class="btnInGroup btnGroup" icon="el-icon-plus"></el-button>
        </el-tooltip>
        <el-tooltip content="批量操作" placement="top">
          <el-button @click="showSelection=!showSelection" class="btnInGroup btnGroup"
                     icon="el-icon-s-grid"></el-button>
        </el-tooltip>
        <template v-if="showSelection">
          <el-tooltip content="批量启用" placement="top">
            <el-button @click="mulEnable(true)" class="btnInGroup btnGroup" icon="el-icon-open"></el-button>
          </el-tooltip>
          <el-tooltip content="批量禁用" placement="top">
            <el-button @click="mulEnable(false)" class="btnInGroup btnGroup" icon="el-icon-turn-off"></el-button>
          </el-tooltip>
          <el-tooltip content="批量删除" placement="top">
            <el-popconfirm
                :title="'确定删除所有选中用户吗?'"
                @confirm="mulDelete">
              <el-button class="btnInGroup btnGroup" icon="el-icon-delete" slot="reference"></el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-button-group>
      <el-button-group style="margin-left: auto;margin-right: 10px">
        <el-tooltip content="下载Excel模板" placement="top">
          <el-button class="btnInGroup btnGroup">
            <svg t="1690714918299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="11415" width="14" height="14">
              <path
                  d="M0 917.147826L603.269565 1024V0L0 109.078261v808.069565z m146.921739-607.721739l89.043478-4.452174 60.104348 111.304348 64.556522-117.982609 91.269565-4.452174-109.078261 207.026087 111.304348 211.478261-97.947826-4.452174-66.782609-140.243478-64.556521 133.565217-86.817392-6.678261 102.4-191.443478c2.226087 0-93.495652-193.669565-93.495652-193.669565z m857.043478-186.991304h-44.521739v162.504347h-55.652174l-13.356521 33.391305h69.008695v100.173913H845.913043l-4.452173 11.130435c-4.452174 8.904348-8.904348 15.582609-15.582609 22.260869h133.565217v93.495652h-164.730435V467.478261h-11.130434c-6.678261 0-13.356522 0-22.26087-4.452174v82.365217h-100.173913v37.843479h100.173913v95.721739h-100.173913v37.843478h100.173913v95.721739h-100.173913v69.008696h342.817391c11.130435 0 20.034783-8.904348 20.034783-20.034783V144.695652c0-11.130435-8.904348-22.26087-20.034783-22.260869z m-42.295652 692.313043h-164.730435v-95.721739h164.730435v95.721739z m0-133.565217h-164.730435v-95.721739h164.730435v95.721739zM725.704348 431.86087l-4.452174-11.130435h-60.104348v33.391304h80.139131c-6.678261-6.678261-11.130435-15.582609-15.582609-22.260869z"
                  fill="#ffffff" p-id="11416"></path>
              <path
                  d="M794.713043 409.6l109.078261-247.095652c2.226087-6.678261 0-13.356522-6.678261-15.582609H845.913043c-6.678261 0-11.130435-4.452174-11.130434-11.130435V11.130435c0-6.678261-4.452174-11.130435-11.130435-11.130435h-77.913044c-6.678261 0-11.130435 4.452174-11.130434 11.130435V133.565217c0 6.678261-4.452174 11.130435-11.130435 11.130435h-46.747826c-6.678261 0-11.130435 4.452174-11.130435 11.130435v4.452174l109.078261 247.095652c2.226087 6.678261 8.904348 8.904348 15.582609 6.678261 0 2.226087 2.226087 0 4.452173-4.452174z"
                  fill="#ffffff" p-id="11417"></path>
            </svg>
          </el-button>
        </el-tooltip>
        <el-tooltip content="导入用户" placement="top">
          <el-button class="btnInGroup btnGroup">
            <svg t="1690715178940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="6225" width="18" height="18">
              <path
                  d="M937.2 851.5V599c-0.7-23.7-20.1-42.7-44-42.7s-43.3 19-44 42.7v217H178.5V599c-0.7-23.7-20.1-42.7-44-42.7s-43.3 19-44 42.7v252.5c0 28.9 23.6 52.5 52.5 52.5h741.8c28.8 0 52.4-23.6 52.4-52.5z"
                  p-id="6226" fill="#ffffff"></path>
              <path
                  d="M482.8 625.2c17.1 17.1 45.1 17.1 62.2 0l164-164c17.1-17.1 17.1-45.1 0-62.2s-45.1-17.1-62.2 0l-85.7 85.7V169.9c0-26-21.3-47.2-47.2-47.2-26 0-47.2 21.3-47.2 47.2v314.7L381 398.9c-17.1-17.1-45.1-17.1-62.2 0s-17.1 45.1 0 62.2l164 164.1z"
                  p-id="6227" fill="#ffffff"></path>
            </svg>
          </el-button>
        </el-tooltip>
        <el-tooltip content="导出用户" placement="top">
          <el-button class="btnInGroup btnGroup">
            <svg t="1690715346343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="25856" width="18" height="18">
              <path
                  d="M849.2 599v217H178.5V599c-0.7-23.7-20.1-42.7-44-42.7s-43.3 19-44 42.7v252.5c0 28.9 23.6 52.5 52.5 52.5h741.7c28.9 0 52.5-23.6 52.5-52.5V599c-0.7-23.7-20.1-42.7-44-42.7s-43.3 19-44 42.7z"
                  p-id="25857" fill="#ffffff"></path>
              <path
                  d="M482.7 135.4l-164 164c-17.1 17.1-17.1 45.1 0 62.2s45.1 17.1 62.2 0l85.7-85.7v314.8c0 26 21.3 47.2 47.2 47.2 26 0 47.2-21.3 47.2-47.2V276l85.7 85.7c17.1 17.1 45.1 17.1 62.2 0s17.1-45.1 0-62.2l-164-164c-17.1-17.2-45.1-17.2-62.2-0.1z"
                  p-id="25858" fill="#ffffff"></path>
            </svg>
          </el-button>
        </el-tooltip>
      </el-button-group>
      <!--弹窗部分-->
      <el-dialog :visible.sync="showDialog"
                 :show-close="false"
                 ref="dialog"
                 :limit="1"
                 :modal-append-to-body='false'
                 :append-to-body="false"
                 @close="closeDialog">
        <h1 style="font-size: 24px;padding-top: 20px;color: var(--deepText)" align="center">
          {{ dialogMode ? '新增用户' : '修改用户信息' }}</h1>
        <el-divider></el-divider>
        <div style="margin: 5% 10% 3%;padding: 3% 5% 1%">
          <el-form ref="form" :model="user" label-width="80px" label-position="left">
            <el-form-item label="用户名">
              <el-input
                  prefix-icon="el-icon-user"
                  v-model="user.name"
                  clearable
                  style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                  prefix-icon="el-icon-lock"
                  v-model="user.password"
                  clearable
                  style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="user.sex">
                <el-radio-button :label="true" style="margin-right: 1px">男</el-radio-button>
                <el-radio-button :label="false">女</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                  prefix-icon="el-icon-phone-outline"
                  v-model="user.phone"
                  clearable
              />
            </el-form-item>

            <el-form-item label="出生日期">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="user.birth"
                  type="date"
                  placeholder="选择日期"
                  :clearable="false">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="定位城市">
              <el-input
                  prefix-icon="el-icon-office-building"
                  v-model="user.city"
                  clearable
                  style="width: 40%"
              />
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input
                  prefix-icon="el-icon-postcard"
                  v-model="user.identificationCard"
                  clearable
              />
            </el-form-item>
            <el-form-item label="角色">
              <el-radio-group v-model="user.role">
                <el-radio-button :label="-2" style="margin-right: 1px">游客</el-radio-button>
                <el-radio-button :label="-1" style="margin-right: 1px">家属</el-radio-button>
                <el-radio-button :label="0" style="margin-right: 1px">老人</el-radio-button>
                <el-radio-button :label="1" style="margin-right: 1px">管理员</el-radio-button>
                <el-radio-button :label="2">护工</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <el-divider/>
        <div style="display: flex;flex-direction: row">
          <el-button @click="addUser" class="formBtn">{{ dialogMode ? '添加' : '修改' }}
          </el-button>
          <el-button @click="closeDialog" class="formBtn">取消
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!--表格部分-->
    <div v-loading="loading" style="height: 100%">
      <table>
        <tr style="color: var(--th);font-size: 14px">
          <th style="width: 1%"></th>
          <th align="left" class="thc" style="width: 3%" v-if="showSelection">
            <el-checkbox v-model="selectAll"></el-checkbox>
          </th>
          <th align="left" class="thc" style="width: 10%">用户名</th>
          <th align="left" class="thc" style="width: 4%">性别</th>
          <th align="left" class="thc" style="width: 8%">生日</th>
          <th align="left" class="thc" style="width: 5%">角色</th>
          <th align="left" class="thc" style="width: 8%">所属养老院</th>
          <th align="left" class="thc" style="width: 10%">手机号</th>
          <th align="left" class="thc" style="width: 14%">身份证号</th>
          <th align="left" class="thc" style="width: 10%">OpenID</th>
          <th align="left" class="thc" style="width: 7%">所在城市</th>
          <th align="left" class="thc" style="width: 8%">注册时间</th>
          <th align="center" class="thc" style="width: 6%">启用</th>
          <th align="center" class="thc" style="width: 4%">操作</th>
        </tr>
        <tr style="height: 30px"></tr>
        <tr @click.prevent="tableItemClick(i)" @contextmenu.prevent="openMenu($event,u)" class="items"
            v-for="(u,i) in users" :key="u.id">
          <td></td>
          <td align="left" v-if="showSelection">
            <el-checkbox v-model="selectList[i]"></el-checkbox>
          </td>
          <td align="left">{{ u.name }}</td>
          <td align="left">{{ u.sex ? '男' : '女' }}</td>
          <td align="left">{{ timeFormat(u.birth) }}</td>
          <td align="left">{{ role(u.role) }}</td>
          <td align="left">{{ u.careHomeName }}</td>
          <td align="left">{{ u.phone }}</td>
          <td align="left">{{ u.identificationCard }}</td>
          <td align="left">{{ u.openid }}</td>
          <td align="left">{{ u.city }}</td>
          <td align="left">{{ timeFormat(u.createdTime) }}</td>
          <td align="center">
            <el-switch
                @change="switchClick(u)"
                v-model="u.status"
                active-color="var(--btn)"
                inactive-color="var(--th)">
            </el-switch>
          </td>
          <td align="center">
            <span @click.stop="openMenu($event,u)" class="el-icon-more" style="cursor: pointer;font-size: 20px"></span>
          </td>
        </tr>
      </table>
      <div v-if="users.length === 0 && !loading">
        <div style="text-align: center;margin-top: 10%;font-size: 40px"><i class="el-icon-box"></i></div>
        <div style="text-align: center;margin-top: 20px;font-size: 20px">搜索结果为空</div>
        <div style="font-size: 10px;text-align: center;margin-top: 100px">请检查 '搜索方式' 和所输入 '关键词' 是否匹配</div>
      </div>
      <div style="display: flex;width: 600px;position: absolute;bottom: 40px;right: calc((82% - 600px)/2)">
        <el-pagination
            v-if="!loading"
            style="display: inline-block;margin: auto"
            background
            layout="prev, pager, next"
            :total="total"
            :pager-count="11"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "User",
  data() {
    return {
      //查询到的用户数组
      users: [],
      //搜索关键词
      searchString: '',
      //关键词类型
      searchMode: 'name',
      //搜索对象，true为用户，false为管理员
      searching: true,
      //是否显示多选框
      showSelection: false,
      //显示弹窗
      showDialog: false,
      //弹窗模式，true为新增，false为修改
      dialogMode: true,
      //新增的用户
      user: {},
      //分页相关
      currentPage: 1,
      pageSize: 7,
      total: 0,
      //页面加载
      loading: false,
      //当前选中
      selectList: [false, false, false, false, false, false, false],
      //全选多选框
      selectAll: false,
      //ip
      serverIp: serverIp
    }
  },
  methods: {
    //搜索用户
    search(b) {
      this.loading = true
      //如果是切换页数直接进行搜索，如果是更新搜索关键词则将页数归1
      if (b) {
        this.currentPage = 1
      }
      let searchObj = this.searching ? 'searchUser' : 'searchAdmin'
      this.request.get(`/user/${searchObj}`, {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchString,
          type: this.searchMode
        }
      }).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '错误',
            message: res.msg
          })
        } else {
          //成功
          this.users = res.data.records
          //将字符串属性转换为Long类型
          this.total = parseInt(res.data.total)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '错误',
          message: err
        })
      })
      this.loading = false
    },
    //根据用户role属性判断角色
    role(r) {
      if (r === 1) {
        return '管理员'
      } else if (r === 0) {
        return '老人'
      } else if (r === 2) {
        return '护工'
      } else if (r === -2) {
        return '游客'
      } else {
        return '家属'
      }
    },
    //修改搜索方式
    handleClick(command) {
      this.searchMode = command
    },
    //批量操作
    mulDelete() {
      let ids = this.getUserIdList()
      if (ids.length === 0) {
        this.$notify({
          title: '操作失败',
          type: 'warning',
          message: '未选中任何用户'
        })
      }
      //将id数组转为字符串
      this.request.delete(`/user/delete-batch?ids=${ids.toString()}`).then(res => {
        if (res.code === '200') {
          this.$notify({
            title: '成功',
            type: 'success',
            message: '所选用户已删除'
          })
          //成功后刷新
          this.search(false)
        } else {
          this.$notify({
            title: '失败',
            type: 'error',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          title: '批量操作失败',
          type: 'error',
          message: err
        })
      })
    },
    mulEnable(b) {
      let ids = this.getUserIdList()
      if (ids.length === 0) {
        this.$notify({
          title: '操作失败',
          type: 'warning',
          message: '未选中任何用户'
        })
      }
      //批量启用
      this.request.put('/user/enable-batch', ids, {
        params: {
          enable: b
        }
      }).then(res => {
        if (res.code === '200') {
          this.$notify({
            title: '成功',
            type: 'success',
            message: `所选用户已${b ? '启用' : '禁用'}`
          })
          //成功后刷新
          this.search(false)
        } else {
          this.$notify({
            title: '失败',
            type: 'error',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          title: '批量操作失败',
          type: 'error',
          message: err
        })
      })
    },
    //获取选中的用户id列表
    getUserIdList() {
      let idList = []
      let j = 0
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i]) {
          idList[j++] = this.users[i].userId
        }
      }
      return idList
    },
    //选择查看管理员还是用户
    changeUserType(toUser) {
      //如果点击已经active的按钮，直接不作响应
      if (this.searching === toUser) {
        return
      }
      this.currentPage = 1
      this.searching = toUser
      if (toUser) {
        //切换至用户
        this.$refs.tab1.classList.value = 'tabChoice activeTab'
        this.$refs.tab2.classList.value = 'tabChoice'
      } else {
        //切换至管理员
        this.$refs.tab1.classList.value = 'tabChoice'
        this.$refs.tab2.classList.value = 'tabChoice activeTab'
      }
      //重新载入
      this.load()
    },
    //关闭弹窗，并清除填入的数据
    closeDialog() {
      this.showDialog = false
      this.user = {}
    },
    //添加或修改用户
    addUser() {
      this.loading = true
      this.user.password =this.user.password ? this.md5(this.user.password) : ''
      this.request.post('/user/save', this.user).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '错误',
            message: res.msg
          })
        } else {
          //成功
          this.$notify({
            type: 'success',
            title: '成功',
            message: this.dialogMode ? '用户添加成功' : '信息修改成功'
          })
          this.showDialog = false
          this.search(false)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '错误',
          message: err
        })
      })
      this.loading = false
      this.user = {}
    },
    //载入用户信息
    load() {
      this.loading = true
      let searchObj = this.searching ? 'listUsers' : 'listAdmins'
      //搜索用户
      this.request.get(`/user/${searchObj}`, {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '查询错误',
            message: res.msg
          })
        } else {
          //成功
          this.users = res.data.records
          this.total = parseInt(res.data.total)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '查询错误',
          message: err
        })
      })
      this.loading = false
    },
    //换页
    pageChange(pageNum) {
      this.currentPage = pageNum
      this.search(false)
    },
    //打开右键菜单
    openMenu(e, user) {
      if (e.x > 1200) {
        if (e.y > 600) {
          this.$bus.$emit('showMenu', e.x - 200, e.y - 50, true, user)
        } else {
          this.$bus.$emit('showMenu', e.x - 200, e.y, true, user)
        }
      } else {
        if (e.y > 600) {
          this.$bus.$emit('showMenu', e.x, e.y - 50, true, user)
        } else {
          this.$bus.$emit('showMenu', e.x, e.y, true, user)
        }
      }
    },
    //打开弹窗
    openDialog() {
      this.dialogMode = true
      this.showDialog = true
    },
    //点击表格项
    tableItemClick(i) {
      if (this.showSelection) {
        this.selectList[i] = !this.selectList[i]
        this.$forceUpdate()
      }
    },
    //启用/禁用用户
    switchClick(user) {
      this.request.put(`/user/enable/${user.userId}?enable=${user.status}`).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '修改启用错误',
            message: res.msg
          })
        } else {
          //成功
          this.$notify({
            type: 'success',
            title: '成功',
            message: `用户 ${user.name} ${user.status ? '已启用' : '已禁用'}`
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '修改启用错误',
          message: err
        })
      })
    },
    //格式化时间
    timeFormat(time) {
      if (time !== null) {
        return time.substring(0, 10)
      }
    }
  },
  computed: {
    //根据关键词类型显示按钮提示文字和图标
    btnWord() {
      switch (this.searchMode) {
        case 'name':
          return '根据用户名搜索'
        case 'phone':
          return '根据手机号搜索'
        case 'city':
          return '根据城市名搜索'
        case 'identification_card':
          return '根据身份证搜索'
        default:
          return '搜索'
      }
    },
    icon(){
      switch (this.searchMode) {
        case 'name':
          return 'el-icon-user'
        case 'phone':
          return 'el-icon-phone-outline'
        case 'city':
          return 'el-icon-office-building'
        case 'identification_card':
          return 'el-icon-postcard'
        default:
          return '搜索'
      }
    }
  },
  watch: {
    selectAll(now) {
      for (let i = 0; i < this.selectList.length; i++) {
        this.selectList[i] = now
      }
    }
  },
  mounted() {
    //修改popper的所在位置
    this.$refs.here.appendChild(
        this.$refs.dropdown.popperElm
    )
    //加载数据
    this.load()
    //编辑用户信息
    this.$bus.$on('editUser', user => {
      this.dialogMode = false
      this.showDialog = true
      //通过JSON字符串方式传递，防止深度修改影响数组中的数据
      this.user = JSON.parse(user)
    })
    //删除用户信息
    this.$bus.$on('deleteUser', user => {
      let u = JSON.parse(user)
      this.request.delete('/user/delete/' + u.userId).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '删除用户错误',
            message: res.msg
          })
        } else {
          //成功
          this.$notify({
            type: 'success',
            title: '成功',
            message: `用户${u.name}已删除`
          })
          this.search(false)
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '删除用户错误',
          message: err
        })
      })
    })
  },
  beforeDestroy() {
    this.$bus.$off('editUser')
    this.$bus.$off('deleteUser')
  }
}

</script>

<style scoped>

.thc {
  cursor: pointer;
}

.thc:hover {
  color: var(--deepText);
}

/*分页管理器样式*/
>>> .btn-quicknext, >>> .btn-quickprev, >>> .btn-next, >>> .btn-prev, >>> .number {
  color: var(--deepText) !important;
  background-color: var(--lightBg) !important;
}

>>> .btn-quicknext:hover, >>> .btn-quickprev:hover, >>> .btn-next:hover, >>> .btn-prev:hover, >>> .number:hover {
  background-color: var(--btnHover) !important;
}

>>> .active {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
}

>>> .active:hover {
  background-color: var(--btnActive) !important;
}

/*输入框样式*/
.input {
  margin-right: 20px;
  width: 400px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

>>> .el-input__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder);
  border-radius: 5px;
}

>>> .el-date-editor .el-input__inner::placeholder {
  color: var(--lightText);
  padding-left: 10px;
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*表格项样式*/
.items {
  width: 100%;
  font-size: 14px;
  height: 54px;
  border: solid #00000000;
  border-width: 10px 10px 10px 20px;
}

.items * {
  letter-spacing: normal;
}

.items:hover {
  background: var(--hover);
}

/*表格样式*/
table {
  width: 100%;
  color: var(--deepText);
  border-collapse: collapse;
  border: none;
}

/*表头行样式*/
tr td:first-child {
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
}

tr td:last-child {
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
}

/*tab样式*/
.tabContainer {
  background-color: var(--inputBg);
  height: 41px;
  width: 175px;
  border-radius: 20px;
  margin: 20px auto 20px 20px;
}

.tabChoice {
  margin: 0;
  display: inline-block;
  width: 50%;
  height: 100%;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}

.tabContainer:not(.activeTab):hover {
  background-color: var(--hover);
}

.activeTab {
  background-color: var(--btn);
  color: var(--btnText);
}

.activeTab:hover {
  background-color: var(--btnActive);
}

/*搜索按钮*/
>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--deepText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}

>>> .el-button--default::before {
  display: none;
}

/*下拉框样式*/
>>> .el-dropdown__caret-button {
  font-size: 13px;
  font-weight: bold;
  margin-left: 2px !important;
  color: var(--btnText);
}

>>> .el-dropdown-menu {
  background-color: var(--lightBg) !important;
}

>>> .popper__arrow, >>> .popper__arrow::after {
  border-bottom-color: var(--lightBg) !important
}

>>> .el-dropdown-menu__item {
  color: var(--deepText);
  font-weight: bold;
  padding: 10px 30px;
}

>>> .el-dropdown-menu__item:hover {
  background-color: var(--hover);
  color: var(--deepText);
}

>>> .el-dropdown > .el-button-group > .el-button:not(:last-child) {
  width: 148px;
}

/*按钮组样式*/
.btnGroup {
  background-color: var(--btn) !important;
  border: none;
  color: var(--btnText) !important;
  transition: 0.2s;
}

.btnGroup:hover {
  background-color: var(--btnActive) !important;
}

.btnInGroup {
  width: 60px;
  height: 30px;
  font-size: 16px;
  border-right: 2px solid var(--deepBg) !important;
  margin-bottom: 10px;
  padding: 5px;
}

/*弹窗样式*/
>>> .el-dialog {
  background-color: var(--lightBg);
  border-radius: 10px;
  height: 650px;
  width: 700px;
  margin-top: calc(25% - 300px) !important;
}

>>> .el-dialog__body {
  height: 100%;
  padding: 0;
}

>>> .el-dialog__header {
  height: 0;
  padding: 0;
}

>>> .el-dialog__wrapper {
  transition-duration: 0.3s;
}

>>> .dialog-fade-enter-active {
  animation: none !important;
}

>>> .dialog-fade-leave-active {
  transition-duration: 0.15s !important;
  animation: none !important;
}

>>> .dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
  animation-fill-mode: forwards;
}

>>> .dialog-fade-enter-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-open;
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

>>> .dialog-fade-leave-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-close;
}

@keyframes anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
}

/*分割线*/
>>> .el-divider {
  background-color: var(--divider);
  width: 90%;
  height: 2px;
  margin: auto;
}

/*日期选择器样式*/
>>> .el-date-editor .el-input__inner {
  cursor: pointer;
}

/*按钮式单选框*/

>>> .el-radio-button__inner {
  background-color: var(--lightBg) !important;
  color: var(--deepText) !important;
  border: none !important;
}

>>> .is-active .el-radio-button__inner {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
  border: none !important;
  box-shadow: none;
}

/*表单label样式*/
>>> .el-form-item__label {
  color: var(--deepText);
}

>>> .el-form-item__content {
  margin-left: 100px !important;
}

/*表单按钮样式*/
.formBtn {
  color: var(--btnText);
  margin: 20px auto;
  width: 140px;
  height: 40px;
  font-size: 14px;
}

/*多选框样式*/
>>> .el-checkbox__inner {
  border: solid 1px var(--lightText);
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--btn) !important;
  border: none;
}

>>> .el-input__inner:focus, >>> .el-textarea__inner:focus{
  border: var(--btn) 1px solid;
}
</style>